<template>
  <div class="do page">
    <my-header :title="todo.title" :date="todo.date"></my-header>
    <location  @locate="setAddressTime" v-model="todo.address"></location>
    <span class="set-time" v-if="todo.addressTime">{{todo.addressTime}}</span>
    <image-upload @click.native="setGroupImgTime" v-model="todo.groupImg" class="plane image-upload" title="合照(必填)" icon="iconpengyou"></image-upload>
    <span class="set-time" v-if="todo.groupTime">{{todo.groupTime}}</span>
    <text-area style="margin-bottom: 20px" v-model="todo.summary" title="总结(必填)"  class="plane summary" icon="iconzongjie" :info="summaryText"></text-area>
    <div class="btns" v-if="todo.status!=1&&isMe">
      <small-btn @click.native="confirm(0)" text="保存" bg-color="#598EFE"></small-btn>
      <small-btn @click.native="confirm(4)" text="提交" bg-color="#009C4E"></small-btn>
    </div>
  </div>
</template>

<script>
import location from '../../components/form/location'
import imageUpload from '../../components/form/image-upload'
import textArea from '../../components/form/text-area'
import smallBtn from '../../components/base/small-btn'
import { get, confirmVisit } from '../../api/todo'
import { parseTime } from '../../util/time'
import { showAlert, showConfirm, showCorrect } from '../../dialog'
import myHeader from '../../components/header'
import { mapState } from 'vuex'

export default {
  created () {
    this.todoId = this.$route.query.id
    // 获取日程信息
    get(this.todoId).then(res => {
      this.todo = res.data
    })
  },
  methods: {
    validate () {
      if (!this.todo.address) {
        showAlert('填写地址')
        return false
      }
      if (!this.todo.groupImg) {
        showAlert('填写合照')
        return false
      }
      if (!this.todo.summary) {
        showAlert('填写总结')
        return false
      }
      return true
    },
    setAddressTime () {
      if (!this.todo.address) {
        this.todo.addressTime = parseTime(new Date())
      }
    },
    setGroupImgTime () {
      if (!this.todo.groupImg) {
        this.todo.groupTime = parseTime(new Date())
      }
    },
    confirm (type) {
      this.todo.status = type
      const ids = this.items.map(item => {
        return item.value
      })
      const nums = this.items.map(item => {
        return item.number
      })
      if (!this.todo.addressTime) {
        showAlert('请点击定位')
      }
      if (type != 0) {
        if (!this.validate()) return
        this.todo.status = type
        showConfirm('是否提交审核', '提交后将不可更改').then(res => {
          if (!res) return
          confirmVisit(this.todo, ids, nums).then(res => {
            showCorrect('操作成功').then(res => {
              this.$router.back()
            })
          })
        })
      } else {
        this.todo.status = type
        confirmVisit(this.todo, ids, nums).then(res => {
          showCorrect('操作成功').then(res => {
            this.$router.back()
          })
        })
      }
    }
  },
  computed: {
    isMe () {
      if (!this.todo.id || this.userId === this.todo.userId) {
        return true
      }
      return false
    },
    ...mapState({
      userId: state => state.user.id
    }),
    date () {
      return parseTime(this.todo.date, '{y}-{m}-{d}')
    }
  },
  data () {
    return {
      todo: {
        title: null,
        address: null,
        groupImg: null,
        summary: null,
        addressTime: null,
        doneTime: null,
        groupTime: null
      },
      alias: {
        value: 'id',
        text: 'name'
      },
      items: [
        {

        }
      ],
      goodsList: [

      ],
      summaryText:
        '拜访对象\n' +
        '相关情况说明\n' +
        '备注等\n'
    }
  },
  components: {
    location, imageUpload, textArea, smallBtn, myHeader
  }
}
</script>

<style scoped lang="stylus">
.do
  overflow scroll
  background-color #F5F4F7
  .set-time
    font-size 11px
    color #B9B7C0
    line-height 11px
    margin-left 10px
  .title
    display flex
    align-items center
    justify-content space-between
    padding 20px 10px 0 10px
    font-weight 500
    dpr-font(16px)
    color:rgba(26,26,48,1);
    margin-bottom 22px
    .date
      color #55545D
.plane
  margin-top 12px
.btns
  padding  0 10px
  margin-top 20px
  display flex
  justify-content space-between
  align-items center
</style>
